<template>
  <div class="staff">
    <el-table
      :data="personnelListDtos"
      style="width: 100%"
      :border="true"
      :highlight-current-row="true"
    >
      <el-table-column label="职员ID" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" align="center">
            <el-tag size="medium">{{ scope.row.personnel_id }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职员相片" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" align="center">
            <img :src="scope.row.personnel_photo" alt="图片加载失败">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职员名字" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" align="center">
            <el-tag size="medium">{{ scope.row.personnel_name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职员性别" width="80" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.personnel_sex }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职员手机号" width="120" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.personnel_number }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职位" width="160" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.personnel_role }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="出生日期" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.personnel_birth }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职员介绍" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.personnel_introduce }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <el-button size="medium" type="success" @click="updataHouse(scope.row)">编辑</el-button>
          <el-button size="medium" type="danger" @click="deleteHouse(scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message, popconfirm } from 'element-ui'
import { getToken, getAccount } from '@/utils/auth'
export default {
  data() {
    return {
      personnelListDtos: [],
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageNum: 1, // 总数页数，
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getList()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getList()
    },
    // 获取所有列表
    getList() {
      return request({
        url: '/v3/personnel/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: {
          current_page: this.currentPage,
          page_size: this.pagesize,
          personnel_id: 0
        }
      }).then(res => {
        this.currentPage = res.current_page
        this.pageNum = res.pages
        this.total = res.total_record
        res.personnelListDtos.map((value, index) => {
          var d = new Date(value.personnel_birth)
          value.personnel_birth =
            d.getFullYear() +
            '-' +
            (d.getMonth() + 1) +
            '-' +
            d.getDate() +
            ' ' +
            d.getHours() +
            ':' +
            d.getMinutes() +
            ':' +
            d.getSeconds()
        })
        this.personnelListDtos = res.personnelListDtos
      })
    }
  }
}
</script>
<style lang="scss"scoped>
.staff {
  margin-top: 60px;
}
</style>
